<template>
	<div class="wy-main user-auth-step">
		<!--<a-button @click="next">下一步</a-button>-->
		<div class="pop" :style="pop_left">
			
			{{text}}
			<div class="horn" :style="colors">
			</div>
		</div>
		<div style="margin-top: 80px;">
		<!--     wait_col       等待审核
				 process_col    审核成功
				 finish_col     正在审核
				 error_col      审核失败  -->
			<a-steps :current="current" labelPlacement="vertical" >
				<a-step status="finish" >
		     	 	<div  slot="icon" class="col process_col">01</div>
			        <template slot="title">
						注册成功
					</template>
					<div slot="description" style="height: 45px;">{{createTime}}</div>
					<a-button slot="description"  class="process_col">用户注册</a-button>
			    </a-step>
			    <a-step >
			    	<div  slot="icon" :class="finishClass" class="col">02</div>
					<template slot="title">
						审核中
					</template>
					 <div slot="description" style="height: 45px;"></div> 
					<a-button slot="description" :class="finishClass">等待初审</a-button>
				</a-step>
				<!--<a-step >
					<div  slot="icon" class="col wait_col">03</div>
					<template slot="title">
						待审核
					</template>
					<p slot="description">2019-03-03</p>
					<a-button slot="description" class="wait_col">等待初审</a-button>
				</a-step>-->
				<a-step v-if="type!=108">
					<div  slot="icon" :class="classData" class="col">03</div>
					<template slot="title">
						审核完成
					</template>
					<div slot="description" style="height: 45px;">{{approvalTime}}</div>
					<a-button slot="description" :class="classData" class="wait_col">审核完成</a-button>
				</a-step>
				<a-step v-if="type==108">
					<div  slot="icon" class="col error_col">03</div>
					<template slot="title">
						审核失败
					</template>
					<div slot="description" style="height: 45px;">{{approvalTime}}</div>
					<a-button slot="description" class="error_col">审核失败</a-button>
				</a-step>
			</a-steps>
			</a-steps>	
			<!--<a-steps :current="3" labelPlacement="vertical" >
				<a-step status="finish" >
		     	 	<div  slot="icon" class="col wait_col">01</div>
			        <template slot="title">
						等待审核
					</template>
					<p slot="description">2019-03-03</p>
					<a-button slot="description"  class="wait_col">用户注册</a-button>
			    </a-step>
			    <a-step >
			    	<div  slot="icon" class="col process_col">02</div>
					<template slot="title">
						审核成功
					</template>
					<p slot="description">2019-03-03</p>
					<a-button slot="description" class="process_col">审核成功</a-button>
				</a-step>
				<a-step >
					<div  slot="icon" class="col finish_col">03</div>
					<template slot="title">
						正在审核
					</template>
					<p slot="description">2019-03-03</p>
					<a-button slot="description" class="finish_col">正在审核</a-button>
				</a-step>
				<a-step >
					<div  slot="icon" class="col error_col">04</div>
					<template slot="title">
						审核失败
					</template>
					<p slot="description">2019-03-03</p>
					<a-button slot="description" class="error_col">审核失败</a-button>
				</a-step>
			</a-steps>-->
		</div>
		
		
		<!--<a-row type="flex"  align="middle">
			<a-col style="width: 80px;" :offset="1"><p class="height-100">登录名：</p></a-col>
			<a-col :span="4"><p class="height-100">芥末</p></a-col>
		</a-row>
		<a-row type="flex"  align="middle">
			<a-col style="width: 80px;" :offset="1"><p class="height-100">用户身份：</p></a-col>
			<a-col :span="4"><p class="height-100">个人</p></a-col>
		</a-row>-->
	</div>
</template>
<script>
	export default {
		data() {
			return {
				text:'正在核对您提交的信息 请耐心等待',
				visible:true,
				createTime:'',
				approvalTime:'',
				current:1,
				pop_left:'',
				finishClass:'finish_col',
				classData:'wait_col',
				colors:'',
				type:''
			}
		},
		beforeCreate() {},
		created(){
			this.type = this.$route.query.f*1
			this.createTime = this.$route.query.createTime
			this.approvalTime = this.$route.query.approvalTime
			this.change_pop()
		},
		watch:{
			'$route.path': function (newVal, oldVal) {
				if (newVal === '/user/auth/step') {
					this.type = this.$route.query.f*1
					this.createTime = this.$route.query.createTime
					this.approvalTime = this.$route.query.approvalTime
					this.change_pop()
				}
			},
		},
		methods: {
			change_pop(){
				if (this.type == 106){
					this.current = 1
					this.pop_left = 'left:calc(50% - 100px)';
					this.colors = 'background:#F5B12E';
					this.finishClass = 'finish_col'
					this.text = '正在核对您提交的信息 请耐心等待';
				}
				if (this.type == 107){
					this.current = 2
					this.pop_left = 'left:calc(100% - 150px);background:#15837A';
					this.classData = 'process_col';
					this.colors = 'background:#15837A';
					this.finishClass = 'process_col'
					this.text = '审核已完成！';
				}
				if (this.type == 108){
					this.current = 2
					this.pop_left = 'left:calc(100% - 150px);background:#FF2F47';
					this.classData = 'error_col';
					this.finishClass = 'process_col'
					this.colors = 'background:#FF2F47';
					this.text = '审核失败！';
				}
			},
			next(){
				this.type++
				if(this.type > 1){
					this.type = 0
				}
				this.change_pop()
			}
		}
	}
</script>

<style lang="less" scoped>
	.user-auth-step {
		padding: 0 20px 40px 20px;
		.cont_title {
			padding-left: 10px;
			margin: 20px 0 0 10px;
			border-left: 2px solid #36948D;
			font-weight: 700;
		}
		.pop{
			width: 200px;
			padding: 20px;
			/*left: calc(35% - 100px);*/  /*第二步*/
			/*left: calc(65% - 100px);*/
			top: 50px;
			background: #F5B12E;
			box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
			position: relative;
			font-size: 16px;
			color: #fff;
			text-align: center;
			.horn{
				width: 10px;
				height: 10px;
				background: #F5B12E;
				position: absolute;
				left: 50%;
				bottom: -5px;
				box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
				transform: translateX(-50%) rotate(45deg);
			}
		}
		.col{
			border-radius:50%;
			text-align: center; 
			font-size: 18px;
			line-height: 30px; 
			width: 30px;
			height: 30px;
		}
		.wait_col{
			color: #fff;
			background: #DADADA;
		}
		.process_col{
			color: #fff;
			background: #15837A;
		}
		.finish_col{
			color: #fff;
			background: #F5B12E;
		}
		.error_col{
			color: #fff;
			background: #FF2F47;
		}
	}
</style>